<template>
<div class="topMenu">
  <div class="width1200 box">
    <span class="homeIcon" @click="$router.push({name:'home'})"><span v-if="routerName!='login'"><i class="el-icon-s-home " ></i>首页</span></span>
    <span class="right">
      <span class="content" v-if="isLogin">欢迎您，&nbsp;&nbsp;</span>
      <span class="content link" v-if="!isLogin" @click="$router.push({name:'login'})">去登录</span>
      <el-dropdown  @command="handleCommand" :show-timeout="10">
        <span class="el-dropdown-link">
           <span  class="content link"> {{userInfo.customerName}}</span>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="myEntrust"><i class="el-icon-document"></i>我的委托</el-dropdown-item>
          <el-dropdown-item command="myMessage"><i class="el-icon-chat-dot-square"></i>我的消息</el-dropdown-item>
          <el-dropdown-item command="userCenter"><i class="el-icon-postcard"></i>资料中心</el-dropdown-item>
          <el-dropdown-item command="safetyGuard"><i class="el-icon-lock"></i>安全中心</el-dropdown-item>
          <el-dropdown-item command="login" divided><span style="color: #FF3838 "> <i class="el-icon-video-pause"></i>退出登录</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <span class="line" v-if="isLogin"></span>
      <span class="content link" v-if="isLogin"  @click="$router.push({name:'shipPlanList'})">我的委托</span>
      <span class="line" v-if="isLogin"></span>
      
      <span class="content link" v-if="isLogin" @click="$router.push({name:'myMessage'})">我的消息<el-badge :value="msgNum" :max="99" class="item"></el-badge></span>
      
      <!-- <span class="line" ></span>
      <span class="content">服务热线：0791-83506590</span> -->
    </span>
  </div>
</div>
</template>

<script>
export default {
  name: "topMenu",
  data(){
    return{
      msgNum:'',
    }
  },
  mounted() {
    this.$api.getUser({}).then((res) => {
      this.$store.dispatch("setIsLogin", true);
      this.$store.dispatch("setUserInfo", res.data);
      localStorage.setItem("userInfo", JSON.stringify(res.data));
    }).catch(err=>{
      this.$store.dispatch("setIsLogin", false);
    });
    let params = {
          startpage:'1',
          pagesize:'10',
          readFlag: '0',
          content:'',
        }
        this.$api
            .getAdvice(params)
            .then((res) => {
              // console.log("res=========", res);
              this.msgNum = res.data.totalNum
            })
            .catch((e) => {
              console.log(e);
              // this.loading = false
            });
  },
  computed:{
    isLogin(){
      return this.$store.getters.isLogin
    },
    userInfo(){
      return this.$store.getters.userInfo
    },
    routerName(){
      return this.$route.name
    },
  },
  methods:{
    handleCommand(name){
      if(name == 'login'){
        this.$store.dispatch("setIsLogin", false);
        localStorage.setItem("token", '');
        this.$router.push({name:'login'})
      }
      if(name == 'safetyGuard'){
        this.$router.push({name:'safetyGuard'})
      }
      if(name == 'myEntrust'){
        this.$router.push({name:'shipPlanList'})
      }
      if(name == 'myMessage'){
        this.$router.push({name:'myMessage'})
      }if(name == 'userCenter'){
        this.$router.push({name:'userInfo'})
      }

    },
  },
}
</script>

<style scoped lang="less">
// .item {
//   margin-top: 10px;
//   margin-right: 5px;
// }
.topMenu{
  width: 100%;
  height: 32px;
  line-height: 32px;
  color: #AAAAAA ;
  background-color: #EFF3EF ;
  font-size: 13px;
  i{
    font-size: 15px;
    margin-right: 3px;
  }
  .homeIcon{
    cursor: pointer;
    &:hover{
      color: #0E6EF0;
    }
    i{
      //margin-right: 15px;
    }

  }
  .box{
    display: flex;
    justify-content: space-between;
    .right{
      display: flex;
      align-items: center;
      height: 32px;
    }
    .content{
      display: inline-block;
      color: #AAAAAA ;
      font-size: 13px;
      height: 32px;
      line-height: 32px;
      cursor: pointer;
    }
    .link{
      &:hover{
        color: #0E6EF0;
      }
    }
    .line{
      display: inline-block;
      height: 15px;
      background-color: #AAAAAA ;
      width: 1px;
      margin: 0 15px;
    }
  }
}
</style>